<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script
    src="https://code.jquery.com/jquery-3.6.1.js"
    integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
    crossorigin="anonymous"></script>
    <title>Document</title>
    <style>
        .wrapper{
            
            width: 300px;
            height: 200px;
            margin: 0 auto;
            position: relative;  
            top: 100px;
        }
        #left{
            float: left;


        }
        #left li{
            border: 1px solid red;
            list-style: none;
        }
        #left li a{
            text-decoration: none;
        }
        #content{
            top: 25px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <ul id="left">
            <li><a href="#">女士</a></li>
            <li><a href="#">儿童</a></li>
            <li><a href="#">男生</a></li>
            <li><a href="#">袜子</a></li>
            <li><a href="#">秋衣</a></li>
            <li><a href="#">裤子</a></li>
            <li><a href="#">秋裤</a></li>
            <li><a href="#">内衣</a></li>
        </ul>
        <div id="content">
            <div>
                <a hred="#"><img src="../vue/images/1.png" width="220px" height="200px"></a>
            </div>
            <div>
                <a hred="#"><img src="../music_sys/src/assets/3.jpg" width="220px" height="200px"></a>
            </div>
            <div>
                <a hred="#"><img src="../music_sys/src/assets/4.jpg" width="220px" height="200px"></a>
            </div>
            <div>
                <a hred="#"><img src="../music_sys/src/assets/5.jpg" width="220px" height="200px"></a>
            </div>
            <div>
                <a hred="#"><img src="../music_sys/src/assets/6.jpg" width="220px" height="200px"></a>
            </div>
            <div>
                <a hred="#"><img src="../music_sys/src/assets/7.jpg" width="220px" height="200px"></a>
            </div>
            <div>
                <a hred="#"><img src="../music_sys/src/assets/8.jpg" width="220px" height="200px"></a>
            </div>
            <div>
                <a hred="#"><img src="../music_sys/src/assets/9.jpg" width="220px" height="200px"></a>
            </div>
        </div>
    </div>
    <script>
        $(function(){
            // 1,鼠标经过左侧的小li
            $("#left li").mousemove(function(){
                // 2，得到当前小li的索引号
                var index = $(this).index()
                console.log(index)
                // 3，让我们右侧的盒子相应索引号的图片显示出来就好了
                $("#content div").eq(index).show()
                // 4，让其余的图片（就是其他的兄弟）隐藏起来
                $("#content div").eq(index).siblings().hide()

            })
        })
    </script>
</body>
</html>